var more = {
  typeLen: -1,
  top: 0,
  init: function () {
    this.iteratorRender()
  },
  iteratorRender: function () {
    if (!page.data.more) return
    for (var attr in page.data.more) {
      var data = page.data.more[attr]
      var index = attr.match(/\d+/g)[0]
      this.render(index, data, this.top)
      this.top += parseInt(data.picHeight) + 80
    }
    this.renderGoToBtn()
    return this
  },

  render: function (index, type, top) {
    var ctype = "0" == type.ctype ? "renderVod" : "renderColumn";
    this.renderContainer(index, type, top);
    this[ctype](index, type);
  },

  renderVod: function (index, type) {
    try {
      var id = 'more-' + index
      var html = "";
      var width = type.picWidth
      var height = type.picHeight
      var len = Math.min(Math.floor(1180 / width))
      var subCol = type.subColumn = getVodListByTypeId({TYPEID: type.typeId, LENGTH: len}).data
      if (!subCol.length) return 
      // var subCol = type.subColumn
      for (var i = 0; i < len; i++) {
        var style =
          "width:" +
          width +
          "px;height:" +
          height +
          "px;top: 0;left: " +
          (50 + (parseInt(width) + 30) * i) +
          "px";
        var data = subCol[i]
        var picture = data.picture;
        var src = width > height ? picture[0].picPath0 : picture[0].picPath1
        var flag = data.charge == 0 ? utils.useStatus('free') : ''
        html +=
          '<div class="item oh border-radius" style="' + style + '" id="' + id + "-" + i + '">'
        html += flag
        // html += '<img class="video-mark" src="./images/video-mark.png"/>'
        html += '<img src="' + src + '" />';
        html += "</div>";
      }
      $('#' + id  + ' .more-container').html(html)
    } catch (err) {
      console.log(err)
      // dialog.show('渲染视频列表错误，请联系管理员！')
    }
  },

  renderColumn: function (index, type) {
    var subCol = type.subColumn
    var id = 'more-' + index
    var html = "";
    var width = type.picWidth
    var height = type.picHeight
    var len = Math.min(Math.floor(1180 / width), subCol.length)
    for (var i = 0; i < len; i++) {
      var style =
        "width:" +
        width +
        "px;height:" +
        height +
        "px;top: 0;left: " +
        (50 + (parseInt(width) + 30) * i) +
        "px";
      var data = subCol[i]
      var picture = data.typePicture
      var src = picture[0].picPath2
      var flag = utils.useStatus(config.columnTypes[data.ctype])
      var className = 'item oh border-radius'
      html +=
        '<div class="' + className + '" style="' + style + '" id="' + id + "-" + i + '">'
      html += flag
      html += '<img src="' + src + '" />'
      html += "</div>";
    }
    $('#' + id  + ' .more-container').html(html)
  },

  renderContainer: function (index, type, top) {
    var width = type.picWidth;
    var height = type.picHeight;
    var id = "more-" + index;
    var len = Math.floor(1180 / width);
    var titleImg = type.typePicture[0].picPath3;

    var html =
      '<div id="' + id + '" class="more-item" style="top:' + top + 'px;">';
    html += '<div class="title"><img src="' + titleImg + '" /></div>';
    html += '<div class="more-container">';
    for (var i = 0; i < len; i++) {
      var style =
        "width:" +
        width +
        "px;height:" +
        height +
        "px;top: 0;left: " +
        (50 + (parseInt(width) + 30) * i) +
        "px";
      html +=
        '<div class="item placeholder" id="' +
        id +
        "-" +
        i +
        '" style="' +
        style +
        '"></div>';
    }
    html += "</div>";
    html += "</div>";
    $("#more").append(html);
  },

  renderGoToBtn: function () {
    var id = "goto";
    var style =
      "left: 50%; top:" +
      (this.top) +
      "px;margin-left:-68px;width: 136px;height: 35px;position:absolute;";
    var btn =
      '<div id="' +
      id +
      '-0" style="' +
      style +
      '" class="item"><img  src="./images/gotop.png"/></div>';
    $("#more").append(btn);
  }
};
